<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 修改印章名称 </template>
    <div>
      <a-form auto-label-width :model="form">
        <a-form-item field="roleName" label="新名称：">
          <a-input
            placeholder="请输入印章名称"
            v-model="NameData.value"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed } from 'vue';

  const props = withDefaults(
    defineProps<{
      // eslint-disable-next-line vue/prop-name-casing
      name: string;
      visible: boolean;
    }>(),
    {
      visible: false
    }
  );

  const emit = defineEmits(['update:visible', 'addName']);

  const form = reactive({});

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    }
  });

  const NameData = computed(() => {
    return props.name;
  });

  // 确定
  const handleOk = async () => {
    emit('addName', NameData);
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less"></style>
